@SelectedColor: #f6f7ff;
@LighterBlue: #409EFF;

.index-box {
  height: 100%;
  & > .el-container {
    height: 100%;
  }
  .header-content-box {
    height: 42px;
    border-bottom: 1px solid #f1e8e8;
    line-height: 42px;
    display: flex;
    justify-content: space-between;
    .logo {
      font-weight: 600;
    }
  }
  .left-content-box {
    border-right: 1px solid #f1e8e8;
    .components-list {
      padding: 8px;
      box-sizing: border-box;
      height: 100%;
      .components-title {
        font-size: 14px;
        color: #222;
        margin: 6px 2px;
        .svg-icon{
          color: #666;
          font-size: 18px;
        }
      }
      .components-item {
        display: inline-block;
        width: 48%;
        margin: 1%;
        transition: transform 0ms !important;

        .components-body {
          padding: 8px 10px;
          background-color: @SelectedColor;
          font-size: 12px;
          cursor: move;
          border: 1px dashed @SelectedColor;
          border-radius: 3px;
          .svg-icon {
            color: #777777;
            font-size: 15px;
          }
          &:hover {
            @Color:#787be8;
            border: 1px dashed @Color;
            color: @Color;
            .svg-icon {
              color: @Color;
            }
          }
        }
      }

    }
  }
  .center-content-box {
    .el-scrollbar {
      width: 100%;
      box-sizing: border-box;
      overflow: hidden;

      .el-scrollbar__wrap {
        box-sizing: border-box;
        overflow-x: hidden !important;
        margin-bottom: 0 !important;
      }

      .el-scrollbar__view {
        overflow-x: hidden;
      }
      .center-board-row {
        padding: 12px 12px 15px 12px;
        & > .el-form {
          height: calc(100vh - 69px);
        }
        .drawing-board {
          height: 100%;
          position: relative;
          .components-body {
            padding: 0;
            margin: 0;
            font-size: 0;
          }
          .components-item.sortable-ghost {
            width: 100%;
            height: 60px;
            background-color: @SelectedColor;
          }
          .active-form-item {
            & > .el-form-item {
              background-color: @SelectedColor;
              border-radius: 6px;
            }
            & > .drawing-item-copy, & > .drawing-item-delete {
              display: initial;
            }
            & > .component-name {
              color: @LighterBlue;
            }
          }
          .el-form-item {
            margin-bottom: 15px;
          }
          .drawing-item {
            position: relative;
            cursor: move;
            &.unfocus-bordered:not(.active-form-item) > div:first-child {
              border: 1px dashed #ccc;
            }
            .el-form-item {
              padding: 12px 10px;
            }
          }
          .drawing-row-item {
            position: relative;
            cursor: move;
            box-sizing: border-box;
            border: 1px dashed #cccccc;
            border-radius: 3px;
            padding: 0 2px;
            margin-bottom: 15px;
            .drawing-row-item {
              margin-bottom: 2px;
            }
            .el-col {
              margin-top: 22px;
            }
            .el-form-item {
              margin-bottom: 0;
            }
            .drag-wrapper {
              min-height: 80px;
            }
            &.active-form-item {
              border: 1px dashed @LighterBlue;
            }
            .component-name {
              position: absolute;
              top: 0;
              left: 0;
              font-size: 12px;
              color: #bbbbbb;
              display: inline-block;
              padding: 0 6px;
            }
          }
          .drawing-item, .drawing-row-item{
            &:hover {
              & > .el-form-item{
                background: @SelectedColor;
                border-radius: 6px;
              }
              & > .drawing-item-copy, & > .drawing-item-delete{
                display: initial;
              }
            }
            & > .drawing-item-copy, & > .drawing-item-delete{
              display: none;
              position: absolute;
              top: -10px;
              width: 22px;
              height: 22px;
              line-height: 22px;
              text-align: center;
              border-radius: 50%;
              font-size: 12px;
              border: 1px solid;
              cursor: pointer;
              z-index: 1;
            }
            & > .drawing-item-copy{
              right: 56px;
              border-color: @LighterBlue;
              color: @LighterBlue;
              background: #fff;
              &:hover{
                background: @LighterBlue;
                color: #fff;
              }
            }
            & > .drawing-item-delete{
              right: 24px;
              border-color: #F56C6C;
              color: #F56C6C;
              background: #fff;
              &:hover{
                background: #F56C6C;
                color: #fff;
              }
            }
          }
        }
      }

      .el-rate{
        display: inline-block;
        vertical-align: text-top;
      }
    }
    .empty-info {
      position: absolute;
      top: 46%;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 18px;
      color: #ccb1ea;
      letter-spacing: 4px;
    }
  }

  .right-content-box {
    border-left: 1px solid #f1e8e8;
  }
}
